<template>
    <div class="sort-items-wrapper">
        <span class="sort-item-label">排序方式</span>
        <div v-for="(item, index) in items"
            :key="index"
            class="sort-item"
            :class="{ active: model === item.value }"
            @click="change(item)">{{ item.label }}</div>
    </div>
</template>

<script>
export default {
    props: {
        modelValue: {
            type: [String, Number],
            default: ''
        },
        items: {
            type: Array,
            default: () => [
                { value: 'publish_date', label: '按时间' },
                { value: 'hot', label: '按热度' },
            ]
        }
    },
    emits: ['change', 'update:modelValue'],
    computed: {
        model: {
            get() {
                return this.modelValue || ''
            },
            set(value) {
                this.$emit('update:modelValue', value)
            }
        }
    },
    methods: {
        change({ value }) {
            this.model = value
            this.$emit('change')
        }
    }
}
</script>

<style lang="scss" scoped>
.sort-items-wrapper {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    flex-shrink: 0;

    .sort-item-label {
        margin-right: 20px;
    }

    .sort-item {
        cursor: pointer;
    }

    .sort-item:not(:last-child) {
        &::after {
            content: "|";
            display: inline-block;
            margin: 0 10px;
            color: var(--el-border-color);
        }
    }

    .active {
        color: #008CFF;
    }
}
</style>